<template>
  <div>
    <h1>树形组件的使用</h1>
    <!--
      data: 传入需要渲染的数据
      label: 值就是渲染到浏览器中的数据
      children：所有的字节点需要通过children进行渲染

      props: 用于修改一些默认值
        label: 可以通过这个属性把默认的渲染的属性名改为其他名字

      default-expand-all: 是否默认展开所有节点, true表示展开
     -->
    <el-tree :data="treeData" :props="{label: 'name'}" default-expand-all />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '总裁办'
        }, {
          name: '技术部',
          children: [
            {
              name: '前端研发部'
            },
            {
              name: 'java研发部'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
